<template>
  <div style="width: 100%;display: flex;" >
        <el-menu
            :default-active="activeMenu"
            class="el-menu-demo"
            style="width: 100%"
            mode="horizontal"
            active-text-color="#ffd04b"
            background-color="rgb(50, 65, 87)"
            text-color="#fff"
            router>
          <el-menu-item index="/setting">MQ设置</el-menu-item>
          <el-menu-item index="/consume">MQ监听</el-menu-item>
        </el-menu>
    <div style="width: 100px;height:59px;position: absolute;right: 0px">
    <el-button type="primary" round style="margin-top: 12px;margin-right:10px;float:right" @click="openDialog">发消息</el-button>
    </div>

  </div>
  <router-view/>

  <el-dialog v-model="dialogFormVisible" title="发送消息" width="30%" draggable @closed="closedDialog">
    <el-form ref="formref" :model="form">

      <el-form-item label="消息主题" :label-width="105" prop="index" required>
        <el-select v-model="form.index" style="width: 400px">
          <el-option v-for="(topic,index) in topics" :label="topic.serverName+'('+topic.groupName+':'+topic.topic+'['+topic.tag+'])'" :value="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息内容" :label-width="105" prop="content" required>
        <el-input type="textarea" rows="10" v-model="form.content" autocomplete="off" style=" width: 400px;" ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog(false)">取消</el-button>
        <el-button type="primary" @click="closeDialog(true)"
        >发送</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "mainPage",
  data(){
    return {
      activeMenu: "/setting",
      topics:[],
      dialogFormVisible:false,
      form: {
        index:"",
        content:""
      }
    }
  },
  methods:{
    openDialog(){
      this.$axios.get("/topic/list")
          .then((success)=>{
            if(success.status==200 && success.data && success.data.length>0){
              this.topics=success.data
              this.dialogFormVisible=true
            }else{
              this.$message({
                message:"请先添加消息主题，再发送消息!",
                type: "error",
                duration:2000
              })
            }
          })
          .catch((error)=>{
            this.$message({
              message:"查询已添加消息主题失败!",
              type: "error",
              duration:2000
            })
          })
    },
    sendMsg(){
      this.$axios.post(
          "/consume/send",
          {
            serverName:this.topics[this.form.index].serverName,
            groupName:this.topics[this.form.index].groupName,
            topic:this.topics[this.form.index].topic,
            tag:this.topics[this.form.index].tag,
            message:this.form.content
          }
      )
          .then((success)=>{
            if(success.status==200 && success.data && success.data==true){
              this.$message({
                message:"发送消息成功!",
                type: "success",
                duration:2000
              })
              this.dialogFormVisible=false
            }else{
              this.$message({
                message:"发送消息失败!",
                type: "error",
                duration:2000
              })
            }
          })
          .catch((error)=>{
            this.$message({
              message:"发送消息失败!"+error.toString(),
              type: "error",
              duration:2000
            })
          })
    },
    closeDialog(save){
      if(!save){
        this.dialogFormVisible=false
      }else{
        this.$refs["formref"].validate((valid) => {
          if (valid) {
            this.sendMsg()
          } else {
            this.$message({
              message:"存在非法信息！!",
              type: "error",
              duration:2000
            })
          }
        })
      }
    },
    closedDialog(){
      this.$refs["formref"].resetFields()
      this.$refs["formref"].clearValidate()
    }
  },
  mounted() {
    this.$router.replace({path: "/server"})
  }
}
</script>

<style scoped>

</style>